<template>
    <div class="goodlistContainer">
        <ul class="mui-table-view"
        v-infinite-scroll="loadMore"
        infinite-scroll-disabled="loading"
        infinite-scroll-distance="10"
        style="max-height:100%;overflow-y:auto">
            <li v-for="item in list" :key="item.id" 
            class="mui-table-view-cell mui-media" @click="goToGoodinfo(item.id)">
                <!-- <router-link :to="'/home/goodinfo/'+ item.id"> -->
                <img class="mui-media-object mui-pull-left" :src="item.img_url">
				<div class="mui-media-body">
					<h3 class="title">{{item.title}}</h3>
                    <p class="price">
                        <span class="sellPrice">￥{{item.sell_price}}</span>
                        <span class="marketPrice">原价{{item.market_price}}</span>
                    </p>
                    <p class="stock">库存:{{item.stock}}</p>
                    <button type="button" class="mui-btn mui-btn-danger">立即抢购</button>
				</div>
                <!-- </router-link> -->
            </li>
            <li class="spinner">
                <mt-spinner type="snake" v-show="is_loading"></mt-spinner>
                <p  v-show="loading">加载完毕~</p>
            </li>
        </ul>
    </div>
</template>

<script>
import {Toast} from 'mint-ui';
export default {
    name:"goodlist",
    data(){
        return {
            loading:false,
            is_loading:false,
            pageindex:1,
            pagesize:5,
            list:[],
        }
    },
    methods:{
        loadMore(){
            this.loading = true;
            this.is_loading = true;
            this.$http.get('/goods/goodlist',{
                params:{
                    pageindex:this.pageindex,
                    pagesize:this.pagesize
                }
            }).then((res) => {
                var data = res.data;
                if(data.Status == 0){
                    if(data.Data.length > 0){
                        this.list = this.list.concat(data.Data);
                        this.pageindex++;
                        this.loading = false;
                    }else{
                        this.loading = true;
                        this.is_loading = false;
                    }
                }else{
                    Toast("请求失败")
                }
            });
        },
        //编程式导航
        //1.给li标签添加@click事件
        //2.在路由模块router。js中，给路由匹配添加name属性
        //3.在click事件中，使用this.$router.push({name:'xxx',params: {id:xxx}})
        goToGoodinfo(goodsId){
            this.$router.push({name:'goodinfo',params: {id:goodsId}})
        }
    },
}
</script>

<style lang="less">
.goodlistContainer{
    padding-bottom: 40px;
    .mui-table-view-cell{
        .mui-media-object{
            width: 120px;
            height: 100px;
            max-width: 120px;
        }
        .mui-media-body{
            .title{
                font-size: 16px;
                font-weight: bold;
                font-family: "微软雅黑";
                color: #333;
                padding-bottom: 18px;
            }
            .price{
                font-size: 12px;
                color: #888;
                margin: 0;
                .sellPrice{
                    font-size: 18px;
                    color:red;
                    font-family: "微软雅黑";
                    font-weight: bold;
                    margin-right: 10px;
                }
                .marketPrice{
                    text-decoration: line-through;
                }
            }
            .mui-btn-danger{
                position: absolute;
                bottom: 30px;
                right: 10px;
            }
        }
    }
    .spinner{
            position: relative;
            left:45%;
            border: none;
        }

}
</style>